<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	省份：
	<select id="province" onchange="selectCity(this)">
		<option>--------请选择-------</option>
	</select>
	城市：
	<select id="city" onchange="selectArea(this)">
		<option>--------请选择-------</option>
	</select>
	区县：
	<select id="area">
		<option>--------请选择-------</option>
	</select>
	
	<script src="static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$.post('${pageContext.request.contextPath}/address?method=selectProvince',
					function(data) {
						$(data).each(function(){
							console.log(this);
							/* <option value="11">山东省</option> */
							var option = '<option value="'+this.id+'">'+this.province+'</option>';
							$('#province').append(option);
						});
					},
					'json');
		});
		
		/* <option value="370000">山东省</option> */
		function selectCity(obj) {
			$.post('${pageContext.request.contextPath}/address?method=selectCity',
					{'provinceId' : obj.value},
					function(data) {
						$('#city option:gt(0)').remove();
						
						$(data).each(function(){
							console.log(this);
							/* <option value="11">山东省</option> */
							var option = '<option value="'+this.id+'">'+this.city+'</option>';
							$('#city').append(option);
						});
					},
					'json');
		}
		
		function selectArea(obj) {
			$.post('${pageContext.request.contextPath}/address?method=selectArea',
					{'cityId' : obj.value},
					function(data) {
						$('#area option:gt(0)').remove();
						
						$(data).each(function(){
							console.log(this);
							/* <option value="11">山东省</option> */
							var option = '<option value="'+this.id+'">'+this.area+'</option>';
							$('#area').append(option);
						});
					},
					'json');
		}

	</script>
	
	
</body>
</html>